<style>
.pure_table_extra { width: 100%; margin-top: 5px; }
.pure_table_extra th { height: 25px; line-height: 25px; }
.pure_form_extra * { font-size: 12px !important; }
.pure_form_extra .mandatory { color: #ff0000; padding-left: 5px; }
</style>

<button onclick="set_addr(null, event);" class="pure-button pure-button-primary">新地址</button>
<table class="pure-table pure_table_extra" cellSpacing=0 cellPadding=0>
  <thead>
    <tr>
      <th style="width: 30px;">&nbsp;</th>
      <th style="width: 100px;">姓名</th>
      <th style="width: 100px;">城市</th>
      <th>地址</th>
      <th style="width: 100px;">电话</th>
      <th style="width: 40px;">&nbsp;</th>
    </tr>
  </thead>
  <tbody id="addr_body"></tbody>
</table>

<div id="dialog_addr" class="pure-form pure-form-aligned pure_form_extra" style="display: none;" title="编辑地址">
  <div class="pure-control-group">
    <label>姓名<span class="mandatory">*</span></label>
    <input id="addr_last_chg" type="text" style="width: 100px;" placeholder="{family name}" />
    <input id="addr_first_chg" type="text" style="width: 100px;" placeholder="{given name}" />
  </div>
  
  <div class="pure-control-group">
    <label>地址<span class="mandatory">*</span></label>
    <input id="addr_addr1_chg" type="text" class="pure-input-1-2" placeholder="{Address}" />
  </div>
  
  <div class="pure-control-group">
    <label>地址2</label>
    <input id="addr_addr2_chg" type="text" class="pure-input-1-2" placeholder="{Address2 (Optional)}" />
  </div>
  
  <div class="pure-control-group">
    <label>城市<span class="mandatory">*</span></label>
    <input id="addr_city_chg" type="text" class="pure-input-1-2" placeholder="{City}" />
  </div>
  
  <div class="pure-control-group">
    <label>国家<span class="mandatory">*</span></label>
    <input id="addr_country_chg" type="text" class="pure-input-1-2" placeholder="{Country}" />
  </div>
  
  <div class="pure-control-group">
    <label>邮编<span class="mandatory">*</span></label>
    <input id="addr_zip_chg" type="text" class="pure-input-1-2" placeholder="{Post Code}" />
  </div>
  
  <div class="pure-control-group">
    <label>电话<span class="mandatory">*</span></label>
    <input id="addr_phone_chg" type="text" class="pure-input-1-2" placeholder="{Phone}" />
  </div>
  
  <div class="pure-control-group">
    <label>邮箱<span class="mandatory">*</span></label>
    <input id="addr_email_chg" type="text" class="pure-input-1-2" placeholder="{Email}" />
  </div>
</div>

<script type="text/javascript">
  /*<![CDATA[*/
  var __user = JSON.parse('<?php echo addslashes(json_encode($user)); ?>');
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __type = '<?php echo $type; ?>';
  
  $(function(){
    render();
  });

  function render() {
    render_addrs();
  };
  
  function render_addrs() {
    $('#addr_body').empty();
    for (var idx in __user.__addrs) {
      var itm = __user.__addrs[idx];
      $('#addr_body').append(
        '<tr class="' + ((idx % 2 == 0) ? 'pure-table-even' : 'pure-table-odd') + '">' + 
          '<td><input onclick="set_default(' + itm.id + ');" type="radio" name="addr" ' + ((itm.is_default == 1) ? 'checked="checked"' : '') + '></input></td>' +
          '<td>' + Utils.get_short(itm.last_name + ' ' + itm.first_name, 10) + '</td>' +
          '<td>' + itm.city + '</td>' +
          '<td>' + itm.address1 + '</td>' +
          '<td>' + itm.phone + '</td>' +
          
          '<td>' +
            '<span title="修改" style="cursor: pointer; float: left;" class="ui-button-icon-primary ui-icon ui-icon-pencil" onclick="set_addr(' + itm.id + ', event)"></span>' +
            '<span title="删除" style="cursor: pointer; float: left;" class="ui-button-icon-primary ui-icon ui-icon-closethick" onclick="delete_addr(' + itm.id + ')"></span>' +
         '</td>' + 
        '</tr>'
      );
    }
    if (__user.__addrs.length == 0) {
      $('#addr_body').append('<tr class="pure-table-even"><td colspan=12>None</td></tr>');
    }
  };

  function set_default(id) {
    for (var idx in __user.__addrs) {
      var itm = __user.__addrs[idx];
      itm.is_default = 0;
    }
    var req = Utils.get_by_id(id, __user.__addrs);
    req.is_default = 1;
    Ajax.request(
      __requrl + 'set_addr',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        render_addrs();
      },
      null
    );
  };

  function set_addr(id, ev) {
    var func = function() {
      var req = Utils.get_by_id(id, __user.__addrs);
      if (!req) {
        req = {
          is_default: (__user.__addrs.length == 0) ? 1 : 0
        };
      }
      req.first_name = $('#addr_first_chg').val();
      req.last_name = $('#addr_last_chg').val();
      req.address1 = $('#addr_addr1_chg').val();
      req.address2 = $('#addr_addr2_chg').val();
      req.city = $('#addr_city_chg').val();
      req.country = $('#addr_country_chg').val();
      req.zip = $('#addr_zip_chg').val();
      req.phone = $('#addr_phone_chg').val();
      req.email = $('#addr_email_chg').val();

      Ajax.request(
        __requrl + 'set_addr',
        'req=' + Utils.encodeURI(JSON.stringify(req)),
        function(rslt) {
          if (!req.id) {
            __user.__addrs.push(rslt);
          }
          render_addrs();
          $('#dialog_addr').dialog('close');
        },
        null
      );
    };
    
    $('#dialog_addr').dialog({
      width: 500,
      position: {
        my: 'left-300 bottom+300',
        of: ev.target
      },
      buttons: {
        'OK': function() {
          func();
        },
        'Cancel': function() { 
          $(this).dialog('close');
        }
      }
    });

    var obj = Utils.get_by_id(id, __user.__addrs);

    $('#dialog_addr input')[0].onkeypress = function(ev) { if(ev.which == 13) { func(); } };

    if (obj) {
      $('#addr_first_chg').val(obj.first_name);
      $('#addr_last_chg').val(obj.last_name);
      $('#addr_addr1_chg').val(obj.address1);
      $('#addr_addr2_chg').val(obj.address2);
      $('#addr_city_chg').val(obj.city);
      $('#addr_country_chg').val(obj.country);
      $('#addr_zip_chg').val(obj.zip);
      $('#addr_phone_chg').val(obj.phone);
      $('#addr_email_chg').val(obj.email);
    } else {
      $('#addr_first_chg').val('');
      $('#addr_last_chg').val('');
      $('#addr_addr1_chg').val('');
      $('#addr_addr2_chg').val('');
      $('#addr_city_chg').val('');
      $('#addr_country_chg').val('');
      $('#addr_zip_chg').val('');
      $('#addr_phone_chg').val('');
      $('#addr_email_chg').val('');
    }
  };

  function delete_addr(id) {
    req = Utils.get_by_id(id, __user.__addrs);
    Ajax.request(
      __requrl + 'delete_addr',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        Utils.splice_by_id(id, __user.__addrs);
        render_addrs();
      },
      { confirm: 1, tt: '确认', txt: '确认删除么？' }
    );
  };
  /*]]>*/
</script>